<template>
  <div class="loginClass">
    <div class="loginContent">
      <div class="name">欢迎来到<br>STRENDY STONE</div>
      <p class="text">中国海归设计师艺术时尚品牌</p>
      <div class="rightForm">
        <el-form :model="form" :rules="rules" ref="formRef">
          <el-form-item prop="account">
            <el-input v-model="form.account" class="login_input" :prefix-icon="UserFilled" placeholder="请输入账号"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" class="login_input" :prefix-icon="Lock" type="password" show-password placeholder="请输入密码"/>
          </el-form-item>
        </el-form>
      </div>
      <!-- <div class="rightForgot">
        <div class="forgotLeft" @click="forgotPassword()">忘记密码？</div>
        <div class="forgotRight" @click="register()">没有账号？<span style="color: rgba(58, 98, 215, 1);">去注册</span> </div>
      </div> -->
      <div class="rightRemember">
        <el-checkbox v-model="form.keep_login" :true-value="1" :false-value="0" label="保持登录" size="large" />
      </div>
      <div class="rightButton">
        <el-button type="primary"  class="login_but" :loading="loading" style="width: 100%;" @click="logInNow">立即登录</el-button>
      </div>
    </div>
	</div>
</template>
  
  
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { useUserInfoStore } from '@/store/index.js';
import avatar from  '@/assets/login/12.jpg'
import { postApi } from "@/api/api.js"
import { UserFilled, Lock } from '@element-plus/icons-vue'

const router = useRouter();
onMounted(()=>{
  //viewportWidth.value = window.innerWidth;
	//loginHeight.value = window.innerHeight;
})

let loginState = ref(1);//1为登录 2为忘记密码 3为重设密码 4为注册

//#region 1 登录数据
let form = ref({
  // account: "18723007633",  13047315551 Qwert123456 admin
  // password: "Qwert123456" 123456,
  account: "",
  password: "",
  keep_login: 0 // 是否保持登录
})
const rules = ref({
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
})

let rememberPassword = ref(false)
let loading = ref(false)
const logInNow = () => {//登录
  loading.value = true;
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      let obj = {
        username: form.value.account,
        password: form.value.password,
        keep_login: form.value.keep_login
      }
      postApi('/login/index', obj).then(res => {
        if(res.code === 1){
          const userInfo = useUserInfoStore();
          userInfo.setUser({ token: res.data })
          router.push({ path: "/homePage" })
          loading.value = false
        }
      }).catch(err => {
        loading.value = false
      })
    } else {
      loading.value = false;
    }
  })
}

let formRef = ref(null)
const forgotPassword = () => {//忘记密码
  loginState.value = 2;

  form.value.account = "";
  form.value.password = "";

  formRef.value.resetFields();
}

const register = () => {//注册
  loginState.value = 4;

  form.value.account = "";
  form.value.password = "";

  formRef.value.resetFields();
}
//#endregion


//#region 2 忘记密码数据
let retrieveForm = ref({
  account: "",
  password: "",
})
const retrieveRules = ref({
  account: [
    { required: true, message: '请输入注册帐号的手机号或邮件地址', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入唯一ID密钥', trigger: 'blur' },
  ],
})
let retrieveLoading = ref(false)
let retrieveRef = ref(null)
const retrievePassword = () => {//找回密码
  retrieveRef.value.validate((valid) => {
    if (valid) {
      retrieveLoading.value = true;
      loginState.value = 3;
      setTimeout(()=>{

        retrieveForm.value.account = "";
        retrieveForm.value.password = "";

        retrieveLoading.value = false;
      },3000)
    } else {

    }
  })
}
//#endregion


//#region 3 重设密码数据
let againForm = ref({
  account: "",
  password: "",
})
const againRules = ref({
  account: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请重复输入新密码', trigger: 'blur' },
  ],
})
let againLoading = ref(false)
let againRef = ref(null)
const againPassword = () => {//重设密码
  againRef.value.validate((valid) => {
    if (valid) {
      againLoading.value = true;
      setTimeout(()=>{
        loginState.value = 1;

        againForm.value.account = "";
        againForm.value.password = "";

        againLoading.value = false;
      },3000)
    } else {
    }
  })
}
//#endregion


//#region 4 注册数据
let registerForm = ref({
  account: "",
  password: "",
})
const registerRules = ref({
  account: [
    { required: true, message: '请输入联系名称', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入您的联系方式', trigger: 'blur' },
  ],
})
let joinLoading = ref(false);
let registerRef = ref(null);
const joinClick = () => {//加入智聊
  registerRef.value.validate((valid) => {
    if (valid) {
      joinLoading.value = true;
      setTimeout(()=>{
        joinLoading.value = false;
      },3000)
    } else {

    }
  })
}
//#endregion
</script>
  
  
<style lang="scss" scoped>
.loginClass{
  position: relative;
	width: 100%;
	height: 100vh;
  background-image: url(@/assets/login/loginBg.jpg);
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
  .loginContent{
    position: absolute;
    right: 120px;
    top: 50%;
    width: 466px;
    min-height: 420px;
    margin-top: -210px;
    background: #FFFFFF;
    box-shadow: 0px 6px 12px 1px rgba(0,0,0,0.02);
    border-radius: 21px 21px 21px 21px;
    padding: 40px 80px;
    .name{
      font-weight: bold;
      font-size: 24px;
      line-height: 33px;
      color: #000000;
    }
    .text{
      font-weight: 500;
      font-size: 12px;
      line-height: 20px;
      color: #000000;
    }
    .rightForm{
      margin-top: 40px;
      .image{
        width: 120px;
        height: 120px;
        display: block;
      }
      .login_input{
        width: 307px;
        height: 43px;
        background: rgba(0,0,0,0.3)!important;
        border-radius: 4px 4px 4px 4px;
      }
    }
    .login_but{
      height: 36px!important;
      background: #000000!important;
      border-radius: 4px 4px 4px 4px!important;
      font-weight: bold!important;
      font-size: 14px!important;
      color: #FFFFFF!important;
    }
    .rightForgot{
      display: flex;
      justify-content: space-between;
      .forgotLeft{
        font-weight: 400;
        font-size: 14px;
        color: rgba(58, 98, 215, 1);
        font-style: normal;
        letter-spacing: 0px;
        line-height: 20px;
        cursor: pointer;
      }
      .forgotRight{
        font-weight: 400;
        font-size: 14px;
        color: rgb(16, 16, 16);
        font-style: normal;
        letter-spacing: 0px;
        line-height: 20px;
        cursor: pointer;
      }
    }
    .rightButton{
      margin-top: 40px;
    }
  }
    
}
</style>
  